<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>
      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
      gantt charts and git graphs.
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="description"
      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
    />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
    <link rel="stylesheet" href="theme.css" />
    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.1/dist/mermaid.min.js"></script>
    <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
    <script>
      // prettier-ignore
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-153180559-1', 'auto');
      if (location) {
        ga('send', 'pageview', location.hash);
      }
    </script>
    <script>
      var require = {
        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
      };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
    <script>
      exports = {};
    </script>
    <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>

    <style>
      .markdown-section {
        max-width: 1200px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      var initEditor = exports.default;
      var parser = new DOMParser();
      var currentCodeExample = 0;
      var colorize = [];

      function colorizeEverything(html) {
        initEditor(monaco);
        return new Promise((resolve, reject) => {
          monaco.editor.setTheme('mermaid');
          var parsed = parser.parseFromString(html, 'text/html').body;
          Promise.all(
            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
            )
          ).then((result) => {
            parsed
              .querySelectorAll('pre[id*="code"]')
              .forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
            resolve(parsed.innerHTML);
          });
        });
      }

      function escapeHTML(html) {
        return html
          .replaceAll('&', '&amp;')
          .replaceAll('<', '&lt;')
          .replaceAll('>', '&gt;')
          .replaceAll('"', '&quot;')
          .replaceAll("'", '&apos;');
      }

      window.$docsify = {
        search: 'auto',
        name: 'mermaid',
        repo: 'https://github.com/mermaid-js/mermaid',
        loadSidebar: true,
        mergeNavbar: true,
        maxLevel: 4,
        subMaxLevel: 2,
        markdown: {
          renderer: {
            code: function (code, lang) {
              if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
                var resultingHTML = '';

                if (lang === 'mmd' || lang === 'mermaid-example') {
                  currentCodeExample++;
                  colorize.push(currentCodeExample);
                  resultingHTML +=
                    '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
                }

                if (lang === 'mermaid' || lang === 'mermaid-example') {
                  resultingHTML +=
                    '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
                }

                if (resultingHTML !== '') {
                  return resultingHTML;
                }
              }
              return this.origin.code.apply(this, arguments);
            },
          },
        },
        plugins: [
          function (hook, vm) {
            hook.beforeEach(function (html) {
              url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
              return editHtml + html;
            });

            hook.afterEach(function (html, next) {
              next(html);
              (async () => {
                while (!window.hasOwnProperty('monaco'))
                  await new Promise((resolve) => setTimeout(resolve, 1000));
                colorizeEverything(html).then(
                  (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
                );
              })();
            });
          },
        ],
      };

      var num = 0;
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

      const conf = {
        logLevel: 4,
        startOnLoad: false,
        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
      };
      if (isDarkMode) conf.theme = 'dark';
      mermaid.initialize(conf);
    </script>
    <script>
      window.onhashchange = function (a) {
        //code
        if (location) {
          ga('send', 'pageview', location.hash);
        }
      };
    </script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
  </body>
</html>
